<template>
  <glsx-dialog
    :show="showPopup"
    :title="dialogTitle"
    @close="closeDialog()"
    v-if="showPopup"
    width="560px"
  >
    <div class="popup_content">
      <el-form
        :model="addForm"
        ref="addForm"
        :rules="addFormRules"
        label-width="120px"
      >
        <el-form-item label="选择城市：" prop="cityName">
          <el-cascader
            v-model="addForm.cityName"
            :options="cityList"
            :props="cascaderProps"
            class="a_cascader"
          ></el-cascader>
        </el-form-item>
        <el-form-item label="城市排序：" prop="sortTime">
          <el-date-picker
            v-model="addForm.sortTime"
            type="datetime"
            class="a_input"
            placeholder="选择日期"
            value-format="yyyy-MM-dd HH:mm:ss"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="是否上架：" prop="isPublished">
          <el-radio-group v-model="addForm.isPublished">
            <el-radio :label="true">是</el-radio>
            <el-radio :label="false">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="是否首页：" prop="isPublished">
          <el-radio-group v-model="addForm.isFeatured">
            <el-radio :label="true">是</el-radio>
            <el-radio :label="false">否</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
    </div>
    <div slot="footer">
      <el-button
        type="primary"
        size="small"
        :loading="loading"
        @click="saveInfo"
        >确定</el-button
      >
      <el-button type="default" size="small" @click="closeDialog()"
        >取消</el-button
      >
    </div>
  </glsx-dialog>
</template>
<script>
import cityList from "@/assets/json/city.json";
import { deepClone, showToast } from "@/common/util";
import {
  ADD_CITY_INFO,
  UPDATE_CITY_INFO,
  GET_CITY_INFO,
} from "@/http/interface";
export default {
  name: "AddCity",
  props: {
    value: {
      type: Boolean,
      default: false,
    },
    id: {
      type: [String, Number],
      default: "",
    },
    type: {
      type: String,
      default: "",
    },
  },
  watch: {
    value: {
      handler: function (n) {
        this.showPopup = n;
      },
      immediate: true,
    },
    id: {
      handler: function (n) {
        if (n) {
          this.getInfo(n);
          this.dialogTitle = "编辑城市";
        }
      },
      immediate: true,
    },
  },
  data() {
    return {
      showPopup: false,
      addForm: {},
      dialogTitle: "新增城市",
      loading: false,
      cityList,
      cascaderProps: {
        value: "name",
        label: "name",
      },
      addFormRules: {
        cityName: [
          { required: true, message: "请选择城市", trigger: "change" },
        ],
        sortTime: [
          { required: true, message: "请选择城市排序", trigger: "change" },
        ],
        isPublished: [
          { required: true, message: "请选择是否上架", trigger: "change" },
        ],
        isFeatured: [
          { required: true, message: "请选择是否首页", trigger: "change" },
        ],
      },
    };
  },
  methods: {
    // 关闭弹框
    closeDialog() {
      this.$emit("input", false);
      this.addForm = {};
    },

    // 获取参数
    getParams() {
      let o = deepClone(this.addForm);
      console.log(o);
      let params = {};
      console.log(typeof o.cityName)
      if(typeof o.cityName == 'object'){
        params.cityName = o.cityName[1];
      }else{
        params.cityName = o.cityName;
      }
      params.sortTime = o.sortTime;
      params.isPublished = o.isPublished;
      params.isFeatured = o.isFeatured;
      if (o.id) {
        params.id = o.id;
      }
      return params;
    },

    // 新增、编辑城市
    saveInfo() {
      let _this = this;
      _this.$refs.addForm.validate((valid) => {
        if (!valid) {
          return false;
        }
        let _params = _this.getParams();
        let callBack = ADD_CITY_INFO;
        let msg = "新增成功";
        if (_params.id) {
          callBack = UPDATE_CITY_INFO;
          msg = "编辑成功";
        }
        callBack(_params).then((res) => {
          if (res.code == 200) {
            showToast({
              message: msg,
              type: "success",
            });
            _this.closeDialog();
            _this.$emit("change");
          }
        });
      });
    },

    // 获取城市信息
    getInfo() {
      let params = {};
      params.id = this.id;
      GET_CITY_INFO(params).then((res) => {
        console.log(res);
        let _obj = res.data||{};
        this.addForm = _obj;
      });
    },
  },
};
</script>
<style lang="scss" scoped>
</style>